<template>
  <div>
    <Layout :gutter="24" :span="['232px', 'calc(100vw - 242px)']" :color="['','']" >
      <template #left>
        <div class="menu-box">
          <div
            v-for="(item, index) in menu"
            :key="item.name"
            class="menu-item"
            :class="{ menu_item: activeIndex === index }"
            @click="handleMenuClick(index, item.route,item.menuId)"
          >
            <img
              :src="activeIndex === index ? item.active : item.patch"
              alt=""
            />
            <span :class="{ active: activeIndex === index }">{{
              item.name
            }}</span>
          </div>
        </div>
      </template>
      <template #right>
        <NuxtPage />
      </template>
    </Layout>
  </div>
</template>

<script setup lang="ts">
import stores from '@/store';

interface MenuItem {
  name: string;
  patch: string | undefined;
  active?: string | undefined;
  route: string;
  menuId?: any;
}

const route = useRoute();
const router = useRouter();

const icons = import.meta.glob('~/assets/manage/*.svg', {
  eager: true,
  query: '?url',
  import: 'default',
});
const active = import.meta.glob('~/assets/manage/active/*.svg', {
  eager: true,
  query: '?url',
  import: 'default',
});


const menu = ref<any[]>([
  // {
  //   name: '诊所管理',
  //   patch: icons['/assets/manage/icon_zhensuo_nor.svg'] as string,
  //   active: active['/assets/manage/active/icon_zhensuo_sel.svg'] as string,
  //   route: '/manage/managePages/clinic',
  // },
  // {
  //   name: '药库管理',
  //   active: active['/assets/manage/active/icon_yaoku_sel.svg'] as string,
  //   patch: icons['/assets/manage/icon_yaoku_nor.svg'] as string,
  //   route: '/manage/managePages/drugStorage',
  // },
  // {
  //   name: '项目设置',
  //   active: active['/assets/manage/active/icon_xiangmu_sel.svg'] as string,
  //   patch: icons['/assets/manage/icon_xiangmu_nor.svg'] as string,
  //   route: '/manage/managePages/project',
  // },
  // {
  //   name: '挂号设置',
  //   active: active['/assets/manage/active/icon_guahao_sel.svg'] as string,
  //   patch: icons['/assets/manage/icon_guahao_nor.svg'] as string,
  //   route: '/manage/managePages/registrationSettings',
  // },
  // {
  //   name: '字段设置',
  //   active: active['/assets/manage/active/icon_ziduan_sel.svg'] as string,
  //   patch: icons['/assets/manage/icon_ziduan_nor.svg'] as string,
  //   route: '/manage/managePages/fields',
  // },
  // {
  //   name: '模板设置',
  //   active: active['/assets/manage/active/icon_muban_sel.svg'] as string,
  //   patch: icons['/assets/manage/icon_muban_nor.svg'] as string,
  //   route: '/manage/managePages/formwork',
  // },
  // {
  //   name: '打印设置',
  //   active: active['/assets/manage/active/icon_dayin_sel.svg'] as string,
  //   patch: icons['/assets/manage/icon_dayin_nor.svg'] as string,
  //   route: '/manage/managePages/print',
  // },
  // {
  //   name: '其他设置',
  //   active: active['/assets/manage/active/icon_qita_sel.svg'] as string,
  //   patch: icons['/assets/manage/icon_qita_nor.svg'] as string,
  //   route: '/manage/managePages/others',
  // },
  // {
  //   name: '操作日志',
  //   active: active['/assets/manage/active/icon_caozuo_sel.svg'] as string,
  //   patch: icons['/assets/manage/icon_caozuo_nor.svg'] as string,
  //   route: '/manage/managePages/logs',
  // },
]);

// 获取权限菜单
let menuItemList = ref<any>( await stores.useBaseDataStore().findMenuList(route.query.menuId));
let menuItem = ref<any>();
menuItem.value =  menuItemList.value.filter((item:any) => {
  return item.menuType == 1
})
//console.log(menuItem.value,'menuItemmenuItem');

menuItem.value.forEach((item: any, index: number) => {
  if(item.perms === 'manage-clinic'){
    //诊所
    menu.value.push({
      patch: icons['/assets/manage/icon_zhensuo_nor.svg'] as string,
      active: active['/assets/manage/active/icon_zhensuo_sel.svg'] as string,
      name: item.menuName,
      route: item.path,
      menuId: item.menuId,
    });
  }else if(item.perms === 'manage-storage'){
    //药库
    menu.value.push({
      active: active['/assets/manage/active/icon_yaoku_sel.svg'] as string,
      patch: icons['/assets/manage/icon_yaoku_nor.svg'] as string,
      name: item.menuName,
      route: item.path,
      menuId: item.menuId,

    });
  }else if(item.perms === 'manage-project'){
    //project
    menu.value.push({
      active: active['/assets/manage/active/icon_xiangmu_sel.svg'] as string,
      patch: icons['/assets/manage/icon_xiangmu_nor.svg'] as string,
      name: item.menuName,
      route: item.path,
      menuId: item.menuId,

    });
  }else if(item.perms === 'manage-registrationSettings'){
    //挂号设置
    menu.value.push({
      active: active['/assets/manage/active/icon_guahao_sel.svg'] as string,
      patch: icons['/assets/manage/icon_guahao_nor.svg'] as string,
      name: item.menuName,
      route: item.path,
      menuId: item.menuId,

    });
  }else if(item.perms === 'manage-formwork'){
    //模板设置
    menu.value.push({
      active: active['/assets/manage/active/icon_muban_sel.svg'] as string,
      patch: icons['/assets/manage/icon_muban_nor.svg'] as string,
      name: item.menuName,
      route: item.path,
      menuId: item.menuId,  

    });
  }else if(item.perms === 'manage-print'){
    //打印设置
    menu.value.push({
      active: active['/assets/manage/active/icon_dayin_sel.svg'] as string,
      patch: icons['/assets/manage/icon_dayin_nor.svg'] as string,
      name: item.menuName,
      route: item.path,
      menuId: item.menuId,

    });
  }
});

//console.log(menu.value);
const activeIndex = ref(0);
const handleMenuClick = (index: number, routePath: string,menuId:any) => {
  activeIndex.value = index;
  router.push(routePath+'?menuId='+route.query.menuId+'&submenuId='+menuId);
};
if(route.query.submenuId){
  menu.value.forEach((item: any, index: number) => {
    if(item.menuId == route.query.submenuId){
      activeIndex.value = index;
      handleMenuClick(0,menu?.value[activeIndex.value]?.route,menu?.value[activeIndex.value]?.menuId)
    }
  });
}


// 根据当前路由设置activeIndex
const updateActiveIndex = () => {
  const currentPath = route.path;
  const menuIndex = menu.value.findIndex(item => currentPath.startsWith(item.route));
  if (menuIndex !== -1) {
    activeIndex.value = menuIndex;
  }
};
definePageMeta({
  name: '管理',
  middleware: 'manage-redirect'
});
// 监听路由变化
watch(() => route.path, () => {
  updateActiveIndex();
}, { immediate: true });
</script>

<style scoped lang="scss">
.menu-box {
  padding-top: 6px;
}

.menu_item {
  background: rgba(24, 179, 171, 0.1);
  border-radius: 6px 6px 6px 6px;
  border: 1px solid #16ada4;
}

.menu-item {
  width: 216px;
  height: 36px;
  cursor: pointer;
  margin: 6px 8px;
  padding: 0 16px;
  padding-top: 3px;
  font-family: Microsoft YaHei, Microsoft YaHei;

  img {
    vertical-align: middle;
  }

  span {
    vertical-align: middle;
    margin-left: 8px;
  }
}

.menu-item span.active {
  color: #16ada4;
  font-weight: bold;
  vertical-align: middle;
  margin-left: 8px;
}
</style>
